<template>
  <div class="box">
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
      class="demo-ruleForm" :size="formSize" status-icon>
      <el-form-item label="登录名" prop="Name">
        <el-input v-model="ruleForm.Name" />
      </el-form-item>
      <el-form-item label="昵称" prop="nick">
        <el-input v-model="ruleForm.nick" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确认修改
        </el-button>
      </el-form-item>
    </el-form>
  </div>
 



  <div class="box">
    <el-form ref="ruleFormRef2" style="max-width: 600px" :model="ruleForm2" :rules="rules2" label-width="auto"
      class="demo-ruleForm" :size="formSize2" status-icon>
      <el-form-item label="原密码" prop="mima">
        <el-input v-model="ruleForm2.mima" />
      </el-form-item>
      <el-form-item label="新密码" prop="mimatwo">
        <el-input v-model="ruleForm2.mimatwo" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm2(ruleFormRef)">
          确认修改
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive ,computed} from 'vue'
import axios from '../../ajax';
import md5 from 'md5';



const formSize = ref('default')
const ruleFormRef = ref()
let ruleForm = reactive({
  Name: '',
  nick: '',
  mima: "",
  mimatwo: ''
})



const rules = reactive({
  Name: [
    { required: true, message: '不能为空', trigger: 'blur' },

  ],
  nick: [
    { required: true, message: '不能为空', trigger: 'blur' },

  ],


})

onMounted(() => {
  // getdata()
})


// let getdata = async () => {
//   let { loginUserName, nickName } = await axios.get('/adminUser/profile')
//   console.log(loginUserName, nickName);
//   ruleForm.Name = loginUserName
//   ruleForm.nick = nickName

// }


//确认修改

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
     adminUser()
    } else {
      console.log('error submit!', fields)
    }
  })
}
let adminUser = async () => {
  let res = await axios.put("/adminUser/name", {
    loginUserName:ruleForm.loginUserName,
    nickName: ruleForm.nickName
  })
}
//第二个表单******************************************************************************************
const formSize2 = ref('default')
const ruleFormRef2 = ref()
let ruleForm2 = reactive({
  mima: "",
  mimatwo: ''
})



const rules2 = reactive({
  mima: [
    { required: true, message: '不能为空', trigger: 'blur' },

  ],
  mimatwo: [
    { required: true, message: '不能为空', trigger: 'blur' },

  ],


})





//确认修改*************************************************************************************

const submitForm2 = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
     adminUser2()
    } else {
      console.log('error submit!', fields)
    }
  })
}
let adminUser2 = async () => {
  let res = await axios.put("/adminUser/password", {
    originalPassword:md5(ruleForm2.mima),
    newPassword: md5(ruleForm2.mimatwo)
  })
}






// ...
import { useStore } from '../../stores/user';
let user_store=useStore()
let userInfo=computed(()=>user_store.userInfo)
ruleForm.Name=userInfo.value.loginUserName;
ruleForm.nick=userInfo.value.nickName




</script>
<style>
.box {
  box-shadow: 0 0 10px #dbdada;
  padding: 20px;
  margin-bottom: 20px;
}
</style>